<template>
  <div>
    <div>
      <chu-group :cols="1" align="center">
        <chu-button @click="goWritePage">开始写文章</chu-button>
      </chu-group>
      <column-list :list="picList"></column-list>
    </div>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import ColumnList from '@/components/ColumnList.vue'

export default defineComponent({
  name: 'Home',
  components: {
    ColumnList
  },
  setup () {
    const store = useStore<StoreProp>()
    const formRef = ref<null | HTMLElement>(null)
    const picList = computed(() => store.state.colunms)
    const router = useRouter()
    const goWritePage = () => {
      router.push({ name: 'ColumnWrite' })
    }
    // store.dispatch('request', { url: '/columns' })
    store.dispatch('fetchColumns')

    return {
      picList,
      formRef,
      goWritePage
    }
  }
})
</script>

<style>

</style>
